<template>
  <div id="baseSelect">
    <el-select
      id="autoScroll"
      v-model="valBind"
      :collapse-tags="false"
      :multiple="false"
      filterable
      :disabled="disabled"
      :clearable="clearable"
      :placeholder="placeholder"
      @change="change"
    >
      <el-option
        v-for="(item, index) in selectLists"
        :key="item[ObjType.key] || index"
        :label="item[ObjType.label]"
        :disabled="item.disabled"
        :value="item[ObjType.val]"
      />
    </el-select>
  </div>
</template>

<script>
import { getSelectData } from '@/api/baseData'
export default {
  name: 'BaseSelect',
  props: {
    value: {
      type: [String, Number],
      default: ''
    },
    selectList: {
      type: Array,
      default: () => {
        return []
      }
    },
    ObjType: {
      type: Object,
      default: () => {
        return { 'label': 'label', 'val': 'id', 'key': 'id' }
      }
    },
    api: { // 接口地址
      type: String,
      default: ''
    },
    placeholder: { // 接口地址
      type: String,
      default: '请选择'
    },
    isPages: { // 是否需要分页
      type: Boolean,
      default: false
    },
    clearable: { // 是否需要分页
      type: Boolean,
      default: true
    },
    disabled: {
      type: Boolean,
      default: false
    },
    params: { // 如果是取自接口择接口的查询入参数
      type: Object,
      default: () => {
        return {}
      }
    },
    pageSize: { // 接口需要分页默认2000条
      type: Number,
      default: 2000
    },
    no: { // 判断是否下拉组建在第几个 有分页弹框使用付1 否则不需传值
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      currentPage: 1,
      totalRecored: 0,
      valBind: '',
      list: []
    }
  },
  computed: {
    selectLists: {
      get: function() {
        if (this.selectList.length > 0) {
          return this.selectList
        }
        return this.list
      },
      set: function(val) {
      }
    }
  },
  watch: {
    value: {
      handler(val) {
        this.valBind = val
      },
      immediate: true,
      deep: true
    },
    'api': (newData, oldData) => {
      if (newData !== oldData && this.selectList.length === 0){
        this.selectLists = []
        if (newData) {
          this.getBaseList()
        }
      }
    }
  },
  mounted() {
    if (this.api) {
      this.getBaseList()
    }
    setTimeout(() => {
      document.getElementsByClassName('el-select-dropdown__wrap')[this.no].addEventListener('scroll', this.scroll, true)
    }, 200)
  },
  methods: {
    change(val) {
      let obj = {}
      this.$emit('input', val)
      this.selectLists.forEach(item => {
        if (item[this.ObjType.val] === val) {
          obj = item
        }
      })
      this.$emit('getSelectObj', obj)
      this.$emit('onSelect', val)
    },
    async getBaseList() { // notice 列表
      let keyParam = this.params
      const _this = this
      if (this.isPages) {
        keyParam = Object.assign(this.params, { pageSize: this.pageSize, currentPage: this.currentPage })
      }
      const keyParams = {}
      const result = await getSelectData(keyParams)
      if (result.code === 0) {
        if (this.isPages) {
          result.data.forEach(item => {
            _this.list.push(item)
          })
          _this.totalRecored = result.total || []
        } else {
          _this.list = result.data || []
        }
      } else {
        _this.list = []
        if (this.isPages) {
          this.totalRecored = []
        }
      }
    },
    scroll() {
      var c = document.getElementsByClassName('el-select-dropdown__wrap')[document.getElementsByClassName('el-select-dropdown__wrap').length - 1].scrollTop
      var b = document.getElementsByClassName('el-select-dropdown__wrap')[document.getElementsByClassName('el-select-dropdown__wrap').length - 1].scrollHeight
      if (this.isPages && c >= b - 300 && this.currentPage < this.totalRecored / this.pageSize) {
        this.currentPage++
        this.getBaseList()
      }
    }
  }
}
</script>

<style scoped>
  #baseSelect {
    display: inline-block;
  }
</style>
